import AppPortal from '@/components/AppPortal'
import { imagesList } from '@/config'
import { appConfigActions } from '@/store/appConfigSlice'
import { offActions } from '@/store/offSlice'
import { useAppSelector, useAppDispatch } from '@/utils/hooks'
import { getClassNames, Icon } from 'magic-ui-react'
import styles from './styles.module.less'
const Options = () => {
  const {
    appConfig: {
      theme,
      appDrawer,
      background,
      conciseMode
    }
  } = useAppSelector(state => state)

  const dispatch = useAppDispatch()

  const themeRender = () => {
    return (
      <div
        className={getClassNames([
          styles.item,
          styles.littleItem,
          styles.itemActve,
        ])}
        onClick={() => {
          const newTheme = theme === 'dark' ? 'light' : 'dark'
          document.querySelector('body')?.setAttribute('theme', newTheme)
          dispatch(appConfigActions.update({
            fieldName: 'theme',
            value: newTheme
          }))
        }}
      >
        <div>
          <Icon size={18} icon={theme === 'light' ? 'sun' : 'moon'} />
        </div>
        <div>
          {theme === 'light' ? '浅色' : '深色'}
        </div>
      </div>
    )
  }

  const toolRender = () => {
    return (
      <div
        className={getClassNames([
          styles.item,
          styles.littleItem,
          styles.itemActve,
          {
            [styles.itemChecked]: appDrawer.open
          }
        ])}
        onClick={() => {
          dispatch(appConfigActions.update({
            fieldName: 'appDrawer',
            value: {
              ...appDrawer,
              open: !appDrawer.open
            }
          }))
        }}
      >
        <div>
          <Icon size={18} icon={'tablet'} />
        </div>
        <div>
          工具
        </div>
      </div>
    )
  }

  /**
   * 简洁模式
   * @returns ReactNode
   */
  const conciseModeRender = () => {
    return (
      <div
        className={getClassNames([
          styles.item,
          styles.littleItem,
          styles.itemActve,
          {
            [styles.itemChecked]: conciseMode
          }
        ])}
        onClick={() => {
          dispatch(appConfigActions.update({
            fieldName: 'conciseMode',
            value: !conciseMode
          }))
        }}
      >
        <div>
          <Icon size={18} icon={'file'} />
        </div>
        <div>
          极简
        </div>
      </div>
    )
  }
  /**
   * 同步配置
   * @returns ReactNode
   */
  const syncRender = () => {
    return (
      <div
        className={getClassNames([
          styles.item,
          styles.littleItem,
          styles.itemActve,
        ])}
        onClick={() => {

        }}
      >
        <div>
          <Icon size={18} icon={'file'} />
        </div>
        <div>
          同步
        </div>
      </div>
    )
  }

  const bgBlurRender = () => {
    return (
      <div
        className={getClassNames([
          styles.item,
          styles.littleItem,

        ])}
        style={{
          gridColumn: 'span 2'
        }}
      >
        <div>背景模糊</div>
        <div
          onClick={() => {
            if (background.blur > 0) {
              dispatch(appConfigActions.updataBackground({
                blur: background.blur - 1
              }))
            }
          }}
          className='text-2xl'
        >
          -
        </div>
        <div className='w-5 flex justify-center text-lg  align-middle'>
          {background.blur}
        </div>
        <div
          onClick={() => {
            if (background.blur <= 9) {
              dispatch(appConfigActions.updataBackground({
                blur: background.blur + 1
              }))
            }
          }}
          className='text-2xl'
        >
          +
        </div>
      </div>
    )
  }

  const wallpaperRender = () => {

    const changewWallpaper = (type: 'previous' | 'next') => {
      const index = imagesList.findIndex(e => e.url == background.currentImage)
      let currentImageIndex = index
      if (type === 'previous') {
        if (currentImageIndex === 0) {
          currentImageIndex = imagesList.length - 1
        } else {
          currentImageIndex -= 1
        }
      }
      if (type === 'next') {
        if (currentImageIndex === (imagesList.length - 1)) {
          currentImageIndex = 0
        } else {
          currentImageIndex += 1
        }
      }
      dispatch(appConfigActions.updataBackground({
        currentImage: imagesList[currentImageIndex].url
      }))
    }

    return (
      <div
        className={getClassNames([
          styles.item,
          'flex flex-col',
        ])}
        style={{
          gridColumn: 'span 2',
          gridRow: 'span 3',
        }}
        onClick={(e) => {
          e.stopPropagation()
        }}
      >
        <div
          className={getClassNames([
            'pt-4 px-4 flex flex-col gap-3'
          ])}
        >
          <div className='flex justify-between items-center'>
            <span>
              壁纸
            </span>
            <div className='flex items-center gap-2'>
              <div
                className={styles.icon}
                onClick={() => {
                  changewWallpaper('previous')
                }}
              >
                <Icon
                  icon='chevron-left'
                />
              </div>
              <div
                className={styles.icon}
                onClick={() => {
                  changewWallpaper('next')
                }}
              >
                <Icon
                  icon='chevron-right'
                />
              </div>
            </div>
          </div>
        </div>
        <div
          className={getClassNames([
            'flex-1 p-4 relative',
          ])}
        >
          <div className='rounded-lg absolute top-4 left-4 right-4 bottom-4 overflow-hidden'>
            <img className='w-full h-full object-cover' src={background.currentImage} alt="wallpaper" />
          </div>
          <div
            className={getClassNames([
              styles.lookMore,
            ])}
            onClick={() => {
              dispatch(offActions.update({
                editWallpaper: true,
              }))
            }}
          >
            查看更多
          </div>
        </div>
      </div>
    )
  }


  return (
    <main
      className={getClassNames([
        styles.Options,
        'sm:grid-cols-4'
      ])}
    >
      {themeRender()}
      {toolRender()}
      {conciseModeRender()}
      {syncRender()}
      {bgBlurRender()}
      {wallpaperRender()}
      <AppPortal>
        sadsa
      </AppPortal>
    </main>
  )
}
export default Options